<template>
	<view class="content">
		
		<view class="shopping" @click="getShopping1">
			<view class="shopping-icon">
				<image src="../../static/mall/mall-imgs5.png" mode=""></image>
			</view>
				<view class="shopping-size">
					商城
				</view>
				
		</view>
		
		<!-- banner -->
		<navigator url="">
		<view class="banner" @click="goCart2">
			<image src="../../static/home/banner.jpg" mode=""></image>
		</view>
		</navigator>
		<!-- 分类区域 -->
		<view class="classify">
				<view class="classify1" @click="goFree()">
					<view class="classify2">
						<image src="../../static/mall/mall-imgs-2.png" mode=""></image>
					</view>
					<view class="classify3">免费寄售区</view>
				</view>
				<view class="classify1">
					
					<view class="classify2">
						<image src="../../static/mall/mall-imgs-1.png" mode=""></image>
					</view>
					<view class="classify3">个人商品区</view>
				</view>
		<!-- <navigator url="specific/commodity"> -->
			<view class="classify1"  @click="member_details(2)">
							<view class="classify2">
								<image src="../../static/mall/mall-imgs-3.png" mode=""></image>
							</view>
							<view class="classify3">官方商品区</view>
							
						</view>
		<!-- </navigator> -->
		<!-- 	<navigator url="specific/complimentary"> -->
				<view class="classify1" @click="member_details(3)">
					<view class="classify2">
						<image src="../../static/mall/mall-imgs-4.png" mode=""></image>
					</view>
					<view class="classify3">官方赠品区</view>
					
				</view>
			<!-- </navigator> -->
		
		</view>
			<!-- 分类 -->
					<view class="local-title">
						<view class="search_criterias">
							<text v-for="(item,index) in search_criteria"
								:class="['selectno',item.selects==true ? 'selectActive':'']"
								@click="searchcriteria(index)">{{item.name}}</text>
						</view>
						<view style="width: 15%; margin: auto; margin-bottom: 20px; border: 0; font-size: 21rpx;">
							<uni-combox class="select_member" placeholder="全部成员" emptyTips="未查到" :candidates="list"></uni-combox>
						 </view>
					</view>
						<view class="classify">
							<view class="classify-content" v-for="item2 in lists2" @click="goCommodity">
								<view class="classify-content-img">
									<image :src="item2.commodityImg" mode=""></image>
								</view>
								<view class="classify-content-name">
									{{item2.commodityName}}
								</view>
								<view class="classify-content-jia">
									￥{{item2.showPrice}}
								</view>
								<view class="classify-content-yh">
									<view class="classify-content-yh1">
										<image :src="item2.commodityImg" mode=""></image>
									</view>
									<view class="">
										{{item2.nickName}}
									</view>
								</view>
							</view>
							<view class="classify-content" @click="goCommodity2">
								<view class="classify-content-img">
									<image src="../../static/home/home-imgs2.png" mode=""></image>
								</view>
								<view class="classify-content-name">
									【支持win7】联想ThinkPad E15 15.6英寸高端轻薄商务办公游戏ibm笔记本电脑
								</view>
								<view class="classify-content-jia">
									￥2839.92
								</view>
								<view class="classify-content-yh">
									<view class="classify-content-yh1">
										<image src="../../static/mall/mall8.png" mode=""></image>
									</view>
									<view class="">
										这是用户名
									</view>
								</view>
							</view>
							<view class="classify-content" @click="goCommodity2">
								<view class="classify-content-img">
									<image src="../../static/home/home-imgs3.png" mode=""></image>
								</view>
								<view class="classify-content-name">
									Lenovo/联想 TS80X 小型静音4U塔式 服务器主机
								</view>
								<view class="classify-content-jia">
									￥2839.92
								</view>
								<view class="classify-content-yh">
									<view class="classify-content-yh1">
										<image src="../../static/mall/mall8.png" mode=""></image>
									</view>
									<view class="">
										这是用户名
									</view>
								</view>
							</view>
							<view class="classify-content" @click="goCommodity">
								<view class="classify-content-img">
									<image src="../../static/home/home-imgs4.png" mode=""></image>
								</view>
								<view class="classify-content-name">
									一加/OnePlus 9Pro系列手机 一加丨哈苏 手机影像系统 一加/OnePlus 9
								</view>
								<view class="classify-content-jia">
									￥2839.92
								</view>
								<view class="classify-content-yh">
									<view class="classify-content-yh1">
										<image src="../../static/mall/mall8.png" mode=""></image>
									</view>
									<view class="">
										这是用户名
									</view>
								</view>
							</view>
						
						</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commodityId:'',//商品id
				list: [       //要展示的数据
				               '商品',
				               // {value: '香蕉', disabled: true},
				               '寄售',
				               '易物'
				           ],
				search_criteria: [{
										"name": '全部',
										"selects": true
									},
									{
										"name": '皮草',
										"selects": false
									},
									{
										"name": '模型',
										"selects": false
									},
									{
										"name": 'Cosplay',
										"selects": false
									},
									{
										"name": '手办',
										"selects": false
									},
									{
										"name": '全部成员',
										"selects": false
									},
								],
								 lists2:[],// 后台商品列表
			};
		},
		onLoad() {
			this.zhengShi()
		},
		methods: {
			// 自己写购物车页面
			goCart2() {
				uni.navigateTo({
					url:'cart/cart2'
				})
			},
			//正式商品列表
			zhengShi() {
				var that = this
				that.$http.req.ajax({
				     path: ':8069/web/mall/commodityList',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
						 commodityName:'',
				    pageNum:'1',//页数
					 pageSize:'1',//	每页显示条数
					 commodityType:''
					 
				     },
				     afterAjax: (res) => {
						 		console.log(res,'正式商品列表列表接口')
						 		if (res.code !== 200) {
						 			console.log(res.data,'正式商品列表接口错误')
						 		}
						 		if (res.code == 200) {
						 			console.log(res,'正式商品列表通了')
									that.lists2 = res.data
									that.commodityId = res.data[0].commodityId
									console.log(that.commodityId)
									console.log(that.lists2,'********')
									uni.showToast({
										title: '',
										icon: 'none'
									})
						 		}
				     }
				    })
			},
			goFree() {
				uni.navigateTo({
					url:'free-goods/free-goods'
				})
			},
			// 点击切换全部等列表
			searchcriteria(i) {
				console.log(i, '22222222')
				this.search_criteria.forEach((el, index) => {
					if (index == i) {
						el.selects = true
						console.log(index)
					} else {
						el.selects = false
					}
				})
			},
			member_details(id) {
				uni.navigateTo({
					url: 'specific/complimentary'
					
				})
			},
			getShopping1() {
				uni.navigateTo({
					url: 'cart/cart'
				})
			},
			// goLoin() {
			// 	uni.navigateTo({
			// 		url: '../login/login'
			// 	})
			// },
			// 原有模板购物车，后期对接接口，自己捋了一遍写在goCommodity2里面
			goCommodity() {
				uni.navigateTo({
					url: '../commodity-details/commodity-details?commodityId=' + this.commodityId
				})
			},
			goCommodity2() {
				uni.navigateTo({
					url: './mall-info?commodityId=' + this.commodityId
				})
			},
			member_details(){
				console.log(this.tags)
				let pagrs;
				if(this.tags == 3){
					pagrs=3
				}else if(this.tags == 2){
					pagrs=4
				}
				uni.navigateTo({
					url:'../business_management/Member_details?pages=' + pagrs
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
	
	.shopping {
		width: 750rpx;
		height: 79rpx;
		z-index: 99;
		position: fixed;
		.shopping-icon {
			width: 360rpx;
			height: 79rpx;
			z-index:100;
			position: fixed;
			background-color: #ffffff;
			top: 2%;
			left: 2%;
			padding-top: 30rpx;
			image {
				max-width: 10%;
				max-height: 50%;
			}
		}
		.shopping-size {
			width: 450rpx;
			height: 79rpx;
			position: fixed;
			background-color: #FFFFFF;
			top: 2%;
			left: 100rpx;
			z-index: 999;
			font-size: 32rpx;
			font-weight: 600;
			padding: 30rpx 25rpx 0 251rpx;
		}
	}
		.banner {
			padding-top: 50rpx;
			width: 699rpx;
			margin: 88rpx 25rpx 21rpx 25rpx;
			height: 293rpx;
			background-color: #000000;
			border-radius: 16rpx;
			background-color: #eaeaea;
			image {
				width: 700rpx;
				height: 293rpx;
			}
			
		}
		// 分类区域
		.classify {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
		
			.classify2 {
				width: 90rpx;
				height: 90rpx;
				margin: 28rpx 41rpx 0 41rpx;
				
				image {
					max-width: 100%;
					max-height: 100%;
				}
			}
			.classify3 {
				font-size: 21rpx;
				text-align: center;
				margin: 32rpx 0 27rpx 0;
			}
		}
		
		// 分类
			// 1111
			.local-title {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					width: 750rpx;
					height: 90rpx;
					margin-top: 18rpx;
					margin-bottom: 18rpx;
				
				}
				.list_time {
					width: 100%;
					height: 141rpx;
					font-size: 21rpx;
					color: #21201D;
				}
				.list_times{
					height: 99rpx
				}
				.list_time .uni-combox__input {
				    font-size: 21rpx;
				}
				.transparents{
					color: transparent;
				}
				.search_criterias {
					width: 538rpx;
					margin-top: 10rpx;
					margin-left: 25rpx;
					overflow: scroll;
					white-space: nowrap;
					height: 50rpx;
					float: left;
				}
				
				.search_criterias text {
					padding: 9rpx 25rpx;
					font-size: 21rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #21201D;
					border: 1px solid #EEEEEE;
					border-radius: 47rpx;
					opacity: 1;
					margin-right: 18rpx;
				}
				.selectActive {
					background: #FFDC1D;
				}
			.select_member {
				width: 121rpx;
				height: 80rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #000000;
				float: right;
				margin-top: 1rpx;
			}
			.selectActive {
				background: #FFDC1D!important;
			}
			.selectno {
				background: #FCFCFC;
			}
			
		
		// 分类内容
		.classify {
			flex-wrap: wrap;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			.classify-content {
				width: 333rpx;
				margin-top: 18rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.classify-content-img {
					width: 333rpx;
					height: 333rpx;
					image {
						max-width: 100%;
						height: 100%;
						
					}
				}
				.classify-content-name {
					margin: 18rpx;
					font-size: 25rpx;
					font-weight: Medium;
					
				}
				.classify-content-jia {
					margin: 18rpx;
					font-size: 25rpx;
					color: #eb3e3e;
				}
				.classify-content-yh {
					display: flex;
					flex-direction: row;
					justify-content: left;
					font-size: 18rpx;
					color: #20212d;
					.classify-content-yh1 {
						margin-right: 14rpx;
						width: 36rpx;
						height: 36rpx;
						image {
							max-width: 100%;
							max-height: 100%;
						}
					}
				}
			}
		}
	
}
</style>
